import * as echarts from 'echarts'

const initTrendsOption = (data: any) => {
  return {
    grid: {
      left: '2%',
      right: '2%',
      bottom: '15%',
      top: '15%'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      padding: [15, 0, 0, 0]
    },
    xAxis: {
      type: 'category',
      axisLabel: {
        interval: 0,
        formatter: function (category: string, index: number) {
          return parseInt(category.substring(category.length - 2)) + '月';
        }
      },
      axisTick: {alignWithLabel: true}
    },
    yAxis: {
      show: false
    },
    series: [
      {type: 'bar', color: '#FF865E'},
      {type: 'bar', color: '#FEE440'},
      {type: 'line', color: 'indianred', symbolSize: 10},
    ],
    dataset:
      {
        // dimensions: ['年月', '支出', '收入', '结余'],
        source: data
      },
  } as echarts.EChartsOption;
};


const initPieOption = (data: any, month: string) => {
  return {
    title: [
      {text: month + ' 收支', left: 'center', top: 10},
      {id: '支出', text: '支出', textVerticalAlign: 'middle', left: 'center', top: '27%'},
      {id: '收入', text: '收入', textVerticalAlign: 'middle', left: 'center', top: '77%'}
    ],
    tooltip: {
      trigger: 'item',
    },
    legend: {
      show: false
    },
    label: {
      alignTo: 'edge',
      formatter: '{b}\n{ratio|{d}%}',
      rich: {
        ratio: {
          fontSize: 10,
          color: '#999'
        }
      },
    },
    dataset: [{
      // dimensions: ['tagName', 'category', 'amount'],
      source: data,
    },
      {
        transform: {
          type: 'filter',
          config: {
            and: [
              {dimension: 'category', '=': '-'},
              {dimension: 'amount', '>': 0}
            ]
          }
        }
      },
      {
        transform: {
          type: 'filter',
          config: {
            and: [
              {dimension: 'category', '=': '+'},
              {dimension: 'amount', '>': 0}
            ]
          }
        }
      }
    ],

    series: [
      {
        name: '支出',
        type: 'pie',
        id: '支出',
        datasetIndex: 1,
        encode: {
          itemName: 'tagName',
          value: 'amount'
        },

        radius: ['30%', '60%'],
        // left: 'center',
        top: '5%',
        height: '45%',
        width: '100%',
        // center: ['50%', '25%'],
        label: {
          alignTo: 'edge',
          minMargin: 5,
          edgeDistance: '12%',
        },
      },
      {
        name: '收入',
        type: 'pie',
        id: '收入',
        radius: ['30%', '60%'],
        // left: 'center',
        top: '55%',
        height: '45%',
        // center: ['50%', '75%'],
        datasetIndex: 2,
        encode: {
          itemName: 'tagName',
          value: 'amount'
        },
        label: {
          alignTo: 'edge',
          minMargin: 8,
          edgeDistance: '12%',
        },
      }
    ],
  } as echarts.EChartsOption;
};
export {initTrendsOption, initPieOption};